import { Component, Vue, Prop } from 'vue-property-decorator';
/**
 *
 * 左侧菜单组件
 * 提供 (
 *  SubMenu 变量 菜单列表
 * )
 *
 */
@Component
class Menu extends Vue {

  @Prop({default: []})
  public SubMenu: any;

  public render(h: any): any {

    const MenuList = this.SubMenu.map((v: any) => {
      // 如果没有下级菜单 直接返回
      if (v.children === undefined) {
        return (
          <el-menu-item index={v.id}>
            <i class='el-icon-menu'></i>
            <span slot='title'>{v.name}</span>
          </el-menu-item>
        );
      }

      // 输出下级菜单
      return (
        <el-submenu index={v.id}>
          <template slot='title'><i class={v.icon}></i><span>{v.name}</span></template>
          <el-menu-item-group>
          {
            v.children.map((sub: any) => (
              <el-menu-item index={sub.id}>{sub.name}</el-menu-item>
            ))
          }
          </el-menu-item-group>
        </el-submenu>
      );
    });

    // default-active 当前选择菜单
    // 对应el-menu-item index参数
    return (
      <el-aside class='left'>
        <el-menu default-active='2' class='el-menu-vertical-demo'>
          {MenuList}
        </el-menu>
      </el-aside>
    );
  }

}
export default Menu;
